<template>
	<view class="main" @touchend.prevent>
		<view class="content" :style="{ bottom: keyHeight }">
			<view class="title">
				<text style="color: #fff; font-size: 32rpx">地址选择</text>
			</view>
			<view class="search-container">
				<!-- 城市搜索 -->
				<view class="city-row">
					<view>
						<text style="font-size: 32rpx; font-weight: 500">地区：</text>
					</view>
					<view class="city-input">
						<uni-data-picker
							readonly="true"
							ref="picker"
							placeholder="请选择地址"
							popup-title="请选择城市"
							collection="opendb-city-china"
							field="code as value, name as text"
							orderby="value asc"
							:step-searh="true"
							self-field="code"
							parent-field="parent_code"
							@change="onchange"
							@nodeclick="onnodeclick"
						></uni-data-picker>
					</view>
				</view>

				<!-- 关键字搜索 -->
				<view class="keyword-search">
					<view><text style="font-size: 32rpx; font-weight: 500">详细地址(选填)：</text></view>
					<view class="key_input"><input class="input_txt" adjust-position="false" v-model="address"  type="text" placeholder="输入地址关键字搜索" /></view>
				</view>
				<view class="btn">
					<button class="a" type="default" size="mini" @click="close"><text>取消</text></button>
					<button class="a" type="primary" size="mini" @click="searchPoi"><text style="color: #fff">前往</text></button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// 修正引号问题
const aMap = uniCloud.importObject('uni-map-co',{customUI:true});
import setToTarget from '../utils/setTarget';
export default {
	name: 'searchPoi',
	data() {
		return {
			address: '',
			city: '',
			keyHeight: 0,
			// 移除 KeyboardEvent 的声明，改用私有变量
		};
	},
	mounted() {
		// 1. 声明私有回调函数（不挂载到 this 上，避免被修改）
		uni.onKeyboardHeightChange((res)=>{
				this.keyHeight = res.height;
		}) 
		// 2. 注册监听
	
		this.$nextTick(() => {
			if (this.$refs.picker && typeof this.$refs.picker.show === 'function') {
				this.$refs.picker.show();
			}
		});
	},

	methods: {
		onchange(e) {
			console.log('地址', e);
			this.city = e.detail.value[1].text;
			this.address = e.detail.value[2]?.text;
		},
		close() {
			this.$emit('close');
			uni.hideKeyboard();
		},

		async searchPoi() {
			try {
				const data = {
					address: this.address,
					city: this.city
				};
				// 调用 getGpsFromPoi 函数获取数据
				const res = await aMap.address2location(data);

				const location = {
					latitude: res.result.result.location.lat,
					longitude: res.result.result.location.lng
				};
				this.$store.commit('msg/SET_location', location);
				const queryParam={
				
					location:location
				}
				//通知VUE会话类型及参数
				setToTarget('public')
				this.$store.commit('msg/SET_isFly', true);
				this.$store.commit('msg/SET_queryParam', queryParam);
				
				
				
				this.$emit('close');

				// 将获取到的数据赋值给组件的 poiData 属性
				this.poiData = res;
			} catch (error) {
				uni.showToast({
					icon: 'error',
					title: '查无地址'
				});
			}
		}
	}
};
</script>

<style lang="scss">
.main {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	z-index: 999;
}
.content {
	position: absolute;
	background-color: #fff;

	left: 0;
	right: 0;
	padding-bottom: 50rpx;
}
.title {
	display: flex;
	align-items: center;
	background-color: #6f6f6f;
	border-top-right-radius: 50%;
	border-top-left-radius: 50%;
	padding: 20rpx 0;
}
.city-row {
	display: flex;
	align-items: center;
	flex-direction: row;
	font-size: 30rpx;
	margin: 10rpx 25rpx;
}
.keyword-search {
	display: flex;
	align-items: center;
	flex-direction: row;
	margin: 10rpx 25rpx;
}
.key_input {
	border-width: 1rpx;
	border-color: #ccc;
	border-radius: 5rpx;
	flex: 1;

	padding: 5rpx 5rpx;
}
.input_txt{
	font-size: 32rpx;
}
.btn {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	padding: 20rpx 20rpx;
	margin: 0 20rpx;
	border-radius: 8rpx;
}
.btn_text {
	color: #fff;
	font-size: 28rpx;
}
.a {
	padding: 10rpx 20rpx;
}
</style>
